<template>
  <div>
    <el-dialog title="申请详情" :visible.sync="showDialog_" custom-class='dialog_right MkPayDetail dialogScroll_detail' top="0%" @close='closeDialog' @open='openDialog'>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - 110)+'px'}]">
      <div class="contentDiv">
      <div class="head">
        <div class="company">{{payDetail.customerName}}<span class="number">{{payDetail.bankCard}}</span><span class="status">{{payDetail.statusCN}}</span></div>
        <div class="address">{{payDetail.address}}</div>
      </div>
      <div class="details">
        <el-row :gutter="20">
          <el-col :span="5">交易银行</el-col>
          <el-col :span="19">{{payDetail.bank}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">开户支行</el-col>
          <el-col :span="19">{{payDetail.openBankBranch}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">流水号</el-col>
          <el-col :span="19">{{payDetail.serialNumber}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">提现日期</el-col>
          <el-col :span="19">{{new Date(payDetail.applyTime ).pattern("yyyy-MM-dd HH:mm")}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">提现金额</el-col>
          <el-col :span="19">{{payDetail.amountOfCash}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">交易分佣</el-col>
          <el-col :span="19">{{payDetail.commission}}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">实际打款</el-col>
          <el-col :span="19">{{payDetail.realMoney}}</el-col>
        </el-row>
        <el-row :gutter="20" v-if="payDetail.otSerialNumber">
          <el-col :span="5">打款流水号</el-col>
          <el-col :span="19">{{payDetail.otSerialNumber}}</el-col>
        </el-row>
        <el-row :gutter="20" v-if="payDetail.timeForMakingMoney">
          <el-col :span="5">打款日期</el-col>
          <el-col :span="19">{{payDetail.timeForMakingMoney | formatDate}}</el-col>
        </el-row>
        <el-row :gutter="20" v-if="payDetail.remarks">
          <el-col :span="5">备注</el-col>
          <el-col :span="19">{{payDetail.remarks}}</el-col>
        </el-row>
      </div>
      </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import payService from './../../../services/charge'

  export default {
    name: 'MkPayDetail',
    components: {
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
    }),
    props: ['showDialog','payDetailId'],
    filters:{
      formatDate(v){
          if(v===null){
              return ''
          }else {
            return new Date(v).pattern("yyyy-MM-dd")
          }
      },
    },
    methods: {
      closeDialog() {
        this.$emit('closeDialog',this.isRefresh);
      },
      openDialog() {
        this.fullscreenLoading=true;
        payService.payDetails({id:this.payDetailId},data=>{
//        	console.log(this.payDetail)
          this.payDetail=data.data;
          this.fullscreenLoading=false;
        })
      },
    },
    data () {
      return {
        dialogVisible: false,
        showDialog_: this.showDialog,
        fullscreenLoading: false,
        isRefresh: 'no',
        payDetail:{},
      }
    },
    watch: {
      showDialog: function(value) {
        this.showDialog_=value;
      },
    }
  }
</script>
<style lang='less'>
  @import '../../../assets/style/main.less';
  .MkPayDetail{
    .head{
      font-size: 20px;
      color: @menuBackColor1;
      .number{
        font-size: 13px;
        display: inline-block;
        margin-left: 15px;
        color: @fontColorThree;
      }
      .status{
        font-size: 14px;
        display: inline-block;
        margin-left: 10px;
      }
      .address{
        font-size: 16px;
        color: @fontColorTwo;
        margin-top: 7px;
      }
    }
    .details{
      line-height: 32px;
      .el-col-5{
        text-align: right;
        color:@fontColorThree;
      }
      .el-col-19{
        color:@fontColorTwo;
        word-break: break-all;
      }
      margin-top: 17px;
      padding: 20px;
      background: #f9fafa;
    }
  }
</style>
